import React, { useState, useEffect } from 'react';
import { Button, Form, DatePicker, TimePicker, InputNumber, Select, Checkbox, Switch } from 'antd';
import moment from 'moment';
import PropStyles from './index.less';
import { DefaultConfig } from '../common/plug-config';
const { RangePicker } = TimePicker;
interface PostData {
    intervalTime: number,
    searchScope: Array<moment.Moment>,
    emailMessage?: boolean,
    airPlace?: 'h' | 'p'
}
type DefaultOptions = Pick<PostData, 'intervalTime' | 'emailMessage'> & { searchScope: Array<string> }
function Index() {
    const [form] = Form.useForm();
    const [initialValues, setInitialValues] = useState({} as PostData);
    function getInitValues() {

        console.log('getInitValues');
        form.resetFields();

        //@ts-ignore
        if (chrome && chrome.storage) {
            //@ts-ignore
            chrome.storage.local.get(['options'], function ({ options }: { options: DefaultOptions }) {
                console.log('prop 用户配置：', options);
                let returnObj: PostData;
                if (options) {
                    returnObj = {
                        intervalTime: options.intervalTime / 1000 / 60,
                        searchScope: options.searchScope.map(item => moment(item, 'HH:mm')),
                        emailMessage: !!options.emailMessage,
                    };
                    setInitialValues(returnObj);
                } else {
                    returnObj = {
                        intervalTime: DefaultConfig.intervalTime / 1000 / 60,
                        searchScope: DefaultConfig.searchScope,
                        emailMessage: DefaultConfig.emailMessage,
                    };
                }

                setInitialValues(returnObj);
                form.resetFields();

            });
        }

    }
    useEffect(() => {
        getInitValues()
    }, []);
    const handleSubmit = (values: PostData) => {
        const sendData = {
            intervalTime: values.intervalTime * 60 * 1000,
            searchScope: values.searchScope.map(item=>item.format('HH:mm')),
            airPlace: values.airPlace,
        }
        console.log("values", values, sendData);
        // @ts-ignore
        if (chrome && chrome.extension) {
            // @ts-ignore
            chrome.extension.sendMessage({
                type: 'options', value: sendData,
            }, function () {
                console.log('finish sendMessage')
            });
        }

    };
    return <div className={PropStyles.page}>
        <h3 className={PropStyles.title}>选项配置</h3>
        <Form
            form={form}
            initialValues={initialValues}
            onFinish={handleSubmit}>
            <Form.Item name="searchScope" label="时间搜索区间" rules={[{ required: true }]}>
                <RangePicker
                    showNow={false}
                    format='HH:mm'
                />
            </Form.Item>
            <Form.Item name="airPlace" label="上海出发机场选择">
                <Checkbox value="h">虹桥</Checkbox>
                <Checkbox value="p">浦东</Checkbox>
            </Form.Item>
            <Form.Item name="emailMessage" label="邮件通知" valuePropName="checked">
                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
            </Form.Item>
            <Form.Item name="intervalTime" label="提醒间隔时间(分)" rules={[{ required: true }]}>
                <InputNumber />
            </Form.Item>
            <Form.Item>
                <Button type="primary" htmlType="submit">确定</Button>
            </Form.Item>
        </Form>
    </div>;

}

export default Index;